<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title></title>
  <link rel="stylesheet" href="../style/css/bootstrap.min.css">
  <link rel="stylesheet" href="../style/css/common.css">
</head>

<body>
  <div class="container">
    <ul class="nav nav-tabs mb20">
      <li><a href="index.html">检测人脸</a></li>
      <li class="active"><a href="compareCode.html">相似度比较</a></li>
      <li><a href="centerFace.html">检测最中心人脸</a></li>
      <li><a href="addFeature.html">添加特征码</a></li>
      <li><a href="../client/index.html" target="_blank">切换版本</a></li>
      <li><a href="../index.html">返回首页</a></li>
    </ul>
    <div class="tips">
      <p>提取特征码调用的接口：/FaceApi/detectAndGetCodeInfo</p>
      <p>请求方式：post</p>
      <p>接口参数：data: JSON.stringify({faceNum: 0, imgData: imgCommon}), </p>
      <p>参数解析：imgCommon: 照片的base64字符串，faceNum：默认值为0；使用JSON.stringify()，将参数内容转为json字符串发送给服务端</p>
    </div>
    <ul id="myTab" class="nav nav-pills">
      <li class="active">
        <a href="#home" data-toggle="tab">特征码比对 1:1</a>
      </li>
      <li>
        <a href="#compares" data-toggle="tab">特征码比对 1:N</a>
      </li>
    </ul>
    <div id="myTabContent" class="tab-content tab-div">
      <div class="tab-pane fade in active clearfix" id="home">
        <div class="tips">
          <p>调用的接口：/FaceApi/compareCode</p>
          <p>请求方式：post</p>
          <p>接口参数：data: JSON.stringify({code1: codeStr1,code2: codeStr2,}) </p>
          <p>参数解析：code1: 照片1的code特征码，code2：照片2的code特征码；使用JSON.stringify()，将参数内容转为json字符串发送给服务端</p>
        </div>
        <div class="div-upload left">
          <button type="button" class="btn btn-default btn-blue">点击上传</button>
          <input type="file" onchange="previewImage(this)" class="btn-file" />
          <div class="preview prevPic"><img src="../style/images/icon1.png" alt="" /></div>
          <div class="picStr" id="code1"></div>
        </div>
        <div class="div-center left">
          <div>
            <button type="button" class="btn btn-default btn-blue compareBtn">点击对比</button>
            <p class="mt20">比对结果：<span class="comPerce">0%</span></p>
          </div>
        </div>
        <div class="div-upload left">
          <button type="button" class="btn btn-default btn-blue">点击上传</button>
          <input type="file" onchange="previewImage(this)" class="btn-file" />
          <div class="preview prevPic"><img src="../style/images/icon1.png" alt="" /></div>
          <div class="picStr" id="code2"></div>
        </div>
      </div>
      <div class="tab-pane fade clearfix" id="compares">
        <div class="tips">
          <p>调用的接口：/FaceApi/compareFaces</p>
          <p>请求方式：post</p>
          <p>接口参数：data: JSON.stringify({"code": codeStr3,"faceNum": 0,"imgData": imgStr})</p>
          <p>参数解析：code1: 单人脸照片的code特征码，imgData：多人脸照片的图片base64格式；使用JSON.stringify()，将参数内容转为json字符串发送给服务端</p>
          <p class="txtDiv none" style="color: #409eff;">对比完成，鼠标经过人脸框，可查看返回详细信息</p>
        </div>
        <div class="div-upload left">
          <button type="button" class="btn btn-default btn-blue">点击上传</button>
          <input type="file" onchange="previewImage(this)" class="btn-file" />
          <div class="preview prevPic" id="viewImg"><img src="../style/images/icon1.png" alt="" /></div>
          <div class="picStr" id="code3"></div>
        </div>
        <div class="div-center left">
          <button type="button" class="btn btn-default btn-blue compareBtn2">点击对比</button>
        </div>
        <div class="div-upload upload-wid left">
          <button type="button" class="btn btn-default btn-blue">点击上传</button>
          <input type="file" onchange="previewImage(this)" class="btn-file" />
          <div class="preview prevPic" id="viewImgs"><img src="../style/images/icon2.png" alt="" /></div>
          <div class="picStr" id="code4"></div>
        </div>
      </div>
    </div>
    <!-- 提示语 -->
    <div class="box">
      <div class="msg"></div>
    </div>
  </div>
  <script src="../style/js/jquery.min.js"></script>
  <script src="../style/js/bootstrap.min.js"></script>
  <script src="js/common.js"></script>
  <script src="js/preview.js"></script>
  <script>
    // 提取特征码
    imgInfoAll = [];   //获取多人脸中所有人脸信息
    imgNatWid2 = '';
    imgNatHei2 = '';
    imgStr = '';
    function getCode(imgCommon, picStrDiv, prevDiv, reader) {
      var codeId = picStrDiv.getAttribute('id');

      $.ajax({
        type: "post",
        url: req_prefix + '/FaceApi/detectAndGetCodeInfo',
        xhrFields: {
          withCredentials: true
        },
        crossDomain: true,
        contentType: "application/json",
        data: JSON.stringify({
          faceNum: 0,
          imgData: imgCommon
        }),
        success: function (data) {
          if(data.success){
            // 将返回的信息赋值给codeAll
            imgInfoAll = data.result;

            // 重置参数值
            picStrDiv.innerText = '';
            
            if(codeId != 'code4'){
              if (imgInfoAll.length > 1) {
                $('.box').show().delay(3000).fadeOut();
                $('.box').find('.msg').text('请上传单人脸照片');
                prevDiv.innerHTML = '<img src="../style/images/icon1.png" alt="" />';
                return false;
              }else{
                picStrDiv.innerText = imgInfoAll[0].code;
              }
            }else{
              var img = new Image();
              img.src = reader.result;
              //获取图片原尺寸
              img.onload = function () {
                imgNatWid2 = this.width;
              };

              if(imgInfoAll.length>4){
                $('.upload-wid').css({'width': '100%', margin : '20px 0 0 0',})
              }else{
                $('.upload-wid').css({ 'width': '295px', margin: '0 3%',})
              }
              imgStr = imgCommon;
            }
          }else{
            $('.box').show().delay(3000).fadeOut();
            $('.box').find('.msg').text('请上传人脸照片');
            prevDiv.innerHTML = '<img src="../style/images/icon1.png" alt="" />';
          }
        },
        error: function (error) {
          $('.box').show().delay(3000).fadeOut();
          $('.box').find('.msg').text(error.responseJSON.error);
        }
      })
    }
    

    // 1:1提交对比
    $('.compareBtn').click(function () {
      var codeStr1 = $('#code1').text();
      var codeStr2 = $('#code2').text();

      $.ajax({
        type: "post",
        url: req_prefix + '/FaceApi/compareCode',
        xhrFields: {
          withCredentials: true
        },
        crossDomain: true,
        contentType: "application/json",
        data: JSON.stringify({
          code1: codeStr1,
          code2: codeStr2,
        }),
        success: function (data) {
          if(data.success){
            var percen = ((data.result * 100).toFixed(2) + '%');
            $('.comPerce').text(percen);
          }else{
            $('.box').show().delay(3000).fadeOut();
            $('.box').find('.msg').text('请按照要求提交照片');
          }
        },
        error: function (error) {
          $('.box').show().delay(3000).fadeOut();
          $('.box').find('.msg').text(error.responseJSON.error);
        }
      })
    })


    // 1:N提交对比
    $('.compareBtn2').click(function () {
      var imgViewWid = '';  //定义需要标注的图片在页面展示的宽度
      var imgViewHei = '';  //同上（高度）
      var viewDiv = '';     //定义需要显示标注的多人脸图片盒子
      var $code3 = $('#code3').text();
      $('#viewImgs').find('div').remove();   //清空内容


      if($code3){
        // 定义并赋值 单人脸图片的code参数
        var codeStr3 = $code3;

        // 赋值
        imgViewWid = $('#viewImgs img').width();
        imgViewHei = $('#viewImgs img').height();

        // 赋值
        viewDiv = $('#viewImgs');
      }


      // 发送请求
      $.ajax({
        type: "post",
        url: req_prefix + '/FaceApi/compareFaces',
        xhrFields: {
          withCredentials: true
        },
        crossDomain: true,
        contentType: "application/json",
        data: JSON.stringify({
          "code": codeStr3,
          "faceNum": 0,
          "imgData": imgStr
        }),
        success: function (data) {
          if (data.success) {
            var newArr = [];  // 定义一个新的数组
            var posArr = [];  // 定义数组，取位置信息
            var numArr = [];  // 定义数组，取相似度百分比
            

            var preceWid = imgViewWid / imgNatWid2; // 图片在页面上显示的宽度除以实际宽度


            // 遍历请求返回的结果
            data.result.similartys.forEach(element => {
              var num = (element * 100).toFixed(2) + '%';
              numArr.push({ "pre": num });
            });


            //循环多人脸图片信息 
            data.result.codes.forEach(element => {
              var pos = element.pos;
              posArr.push({ "pos": element.pos, "angle": element.angle, "ei": element.ei, "mouth": element.mouth, nose: element.nose })
            })


            // 得到所有内容的新数组
            newArr = posArr.map((item, index) => {
              return { ...item, ...numArr[index] };
            });


            newArr.forEach(value => {
              var pos = value.pos;

              //JSON字符串话返回的数据并显示 
              var angle = JSON.stringify(value.angle);
              var posi = JSON.stringify(value.pos);
              var ei = JSON.stringify(value.ei);
              var mouth = JSON.stringify(value.mouth);
              var nose = JSON.stringify(value.nose);
              var tips = '<div class="tips-hover tips"><p>angle:' + angle + '</p><p>ei:' + ei + '</p><p>mouth:' + mouth + '</p><p>nose:' + nose + '</p><p>pos:' + posi + '</p></div> ';
              

              var html = '<div class="drawDiv" style="left:' + pos.left * preceWid + 'px;top:' + pos.top * preceWid + 'px;width:' + pos.width * preceWid + 'px;height:' + pos.height * preceWid + 'px;"><p>' + value.pre + '</p>' + tips +'</div>'

              // 加入
              viewDiv.append(html);
              
              $('.txtDiv').show();
            })
          } else {
            $('.box').show().delay(3000).fadeOut();
            $('.box').find('.msg').text(data.errorMessage);
          }
        },
        error: function (error) {
          $('.box').show().delay(3000).fadeOut();
          $('.box').find('.msg').text(error.responseJSON.error);
        }
      })
    })

    // 获取div-center盒子的高度
    var mainHeight = $('.div-upload').outerHeight();
    $('.div-center').css('height', mainHeight);


    $('.preview').on('mouseenter', ".drawDiv", function () {
      $(this).children('div').show();
    }).on('mouseleave', '.drawDiv', function () {
      $(this).children('div').hide()
    })
  </script>
</body>
</html>